<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../../../css/public.css" media="all">
    <style>
        body {
            background-color: #ffffff;
        }
    </style>
</head>

<body>
    <div class="layui-form layuimini-form" lay-filter="objForm">
        <input type="hidden" id="in-vaccinator" name="id" />
        <div class="layui-form-item">
            <label class="layui-form-label">用户姓名</label>
            <div class="layui-input-inline">
                <input type="text" name="username" lay-verify="required" placeholder="请输入" autocomplete="off"
                    class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户职位</label>
            <!-- <div class="layui-input-inline">
            <select name="nickname" id="select-vaccine" autocomplete="off">
                <option value=""></option>
                 <option value="管理员">管理员</option>
                <option value="经理">经理</option>
                <option value="学生">学生</option> 
            </select>
        </div> -->
            <div class="layui-input-inline">
                <div class="layui-inline" style="width: 235px;">
                    <input name="nickname" class="layui-input" id="demo2">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">头像</label>
            <div class="layui-input-inline">
                
            <img src="{{avatar}}" name="avatar" style="width:80px; height:80px;" id="pic"/>
            <input type="text" name="avatar"id="inpic"/>
            </div>
            <button type="button" class="layui-btn" id="test1">
                <i class="layui-icon">&#xe67c;</i>上传图片
            </button>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">邮箱</label>
            <div class="layui-input-inline">
                <input type="text" name="email" lay-verify="required" placeholder="请输入" autocomplete="off"
                    class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">电话</label>
            <div class="layui-input-inline">
                <input type="text" name="tel" lay-verify="required" placeholder="请输入" autocomplete="off"
                    class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
            </div>
        </div>
    </div>
    </div>
    <script src="../../../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
    <script>
        layui.use(['form'], function () {
            var form = layui.form,
                layer = layui.layer,
                laydate = layui.laydate
            $ = layui.$;
            laydate.render({
                elem: '#date'
            });
            var jsonStr = localStorage.getItem("user");
            console.log(jsonStr);
            var userObj = JSON.parse(jsonStr);
            form.val("objForm", {
                username: userObj.username,
                id: userObj.id,
                nickname: userObj.nickname,
                email: userObj.email,
                tel: userObj.tel,
                avatar: userObj.avatar,
            })
            $("#pic").attr('src',userObj.avatar)

            //下拉菜单 - 居民名称
            $.ajax({
                url: '/user/selectnickname',
                dataType: 'json',
                type: 'post',
                success: function (data) {
                    data = data.data.residentName;
                    $.each(data, function (index, item) {
                        //option  第一个参数是页面显示的值，第二个参数是传递到后台的值
                        $('#select-resident').append(new Option(item));//往下拉菜单里添加元素
                    })
                    $('#select-resident').val(vaccinestatusObj.resident_name);
                    form.render(); //更新全部表单内容
                }
            });

            //从localStorage 把数据取出来  赋值给表单项
            // var jsonStr = localStorage.getItem("vaccinevaccinator");
            // var vaccineVaccinatorObj = JSON.parse(jsonStr);    
            //给表单项赋值
            // form.val("vaccineForm",{
            //     resnident_name:vaccineVaccinatorObj.resnident_name,
            //     vaccine_name:vaccineVaccinatorObj.vaccine_name,

            // });
            // $('##select-vaccine').val(vaccineVaccinatorObj.vaccine_name);



            //监听提交
            form.on('submit(saveBtn)', function (data) {
                var index = layer.alert(JSON.stringify(data.field), {
                    title: '最终的提交信息'
                }, function () {
                    console.log("data oss"+data)
                    // 关闭弹出层
                    layer.close(index);
                    var iframeIndex = parent.layer.getFrameIndex(window.name);
                    parent.layer.close(iframeIndex);

                });
                

                $.ajax({
                    url: "/user/updateByPrimaryKey",
                    data: data.field,
                    type: 'post',
                    success: function (data) {
                        if (data.code == 200) {
                            parent.layer.msg("修改成功")

                        }
                    },
                    error: function (data) {
                        console.log("bbb = " + data)
                        layer.alert("修改失败!")
                    }
                });

                return false;
            });
        });
    </script>
    <script>
        layui.use('upload', function () {
            var upload = layui.upload;

            //执行实例
            var uploadInst = upload.render({
                elem: '#test1' //绑定元素
                , url: '/user/load/' //上传接口
                , done: function (res) {
                    //上传完毕回调
                    $("#pic").attr('src',res.data.picUrl)
                    $("#inpic").val(res.data.picUrl)
                }
                , error: function () {
                    //请求异常回调
                }
            });
        });
    </script>
    <script>
        layui.use('dropdown', function () {
            var dropdown = layui.dropdown
            dropdown.render({
                elem: '#demo2'
                , data:
                    [{
                        title: '管理员'
                        , id: 101
                    },
                    {
                        title: '经理'
                        , id: 102
                    },
                    {
                        title: '学生'
                        , id: 103
                    },
                    ]
                , click: function (obj) {
                    this.elem.val(obj.title);
                }
                , style: 'width: 235px;'
            });
        })

    </script>
</body>

</html>